<template>
  <div class="pie">
    <div class="chart" ref="chart"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
import { getPieOption } from './../../utils/echarts-option'
import { changePieData, pieData } from './../../utils/index'
export default {
  name: 'pie',
  props: {
    pieData: {
      type: Array,
      default: () => {
        return []
      }
    },
    typeName: {
      type: [String, Number]
    }, // 如果pieData传入的为原始数据[{typeName: '22', dataName: '44', typeId: '23'}]
    dataName: {
      type: [String, Number]
    },
    // 是否使用value
    isUseValue: {
      type: Boolean,
      default: false
    }, // 此值决定是使用pieData，typeName，dataName 还是使用value, pieNameArr
    value: {
      type: Array,
      default: () => []
    }, // 与pieData不共用
    pieLegend: {
      type: Array,
      default: () => []
    }, // value存在的时候，此值必传
    labelLine: {
      type: Object
    },
    labelSize: {
      type: [String, Number]
    },
    // 饼状图半径
    seriesRadius: {
      type: Array,
      default: () => [['15%', '50%'], ['5%', '10%'], ['55%', '56%'], ['62%', '63%'], ['69%', '70%']]
    },
    // 计算线长
    isUseComputedLine: {
      type: Boolean,
      default: false
    },
    // 饼状图类型
    pieType: {
      type: String
    },
    // 控制是否需要显示label
    labelShow: {
      type: Boolean,
      default: true
    },
    // 限制饼状图的类型长度 默认7个
    limitLength: {
      type: Number,
      default: 8
    },
    // 此值为'NotOther'超出没有其他项详情提示
    notOther: {
      type: String,
      default: ''
    },
    dtottedLine: {
      type: Boolean,
      default: true
    },
    // 数值后面的单位
    tooltipsUnit: {
      type: String,
      default: ''
    },
    // label的处理函数
    labelFormatter: {
      type: [Function, String],
      default: ''
    },
    // 是否允许数据等于0的时候显示tooltip提示
    isCanEmpty: {
      type: Boolean,
      default: false
    }
  },
  components: {
  },
  data () {
    return {
      chart: '',
      changeLabelLine: {
        normal: {
          length: 20,
          length2: 10
        }
      }
    }
  },
  methods: {
    initChart () {
      if (this.chart === '') {
        this.chart = echarts.init(this.$refs.chart)
      } else {
        this.chart.clear()
        this.$refs.chart.removeChild(this.$refs.chart.lastElementChild)
      }
      this.chart = echarts.init(this.$refs.chart)
      let data = this.isUseValue ? pieData({ name: this.pieLegend, data: this.value, limitLength: this.limitLength, type: this.notOther }) : changePieData(this.pieData, this.typeName, this.dataName, this.limitLength, this.notOther)
      data.labelLine = this.isUseComputedLine ? this.changeLabelLine : this.labelLine
      data.labelSize = this.labelSize
      data.type = this.pieType
      data.dtottedLine = this.dtottedLine
      data.labelShow = this.labelShow
      data.labelFormatter = this.labelFormatter
      data.seriesRadius = this.seriesRadius
      data.tooltipsUnit = this.tooltipsUnit
      data.isCanEmpty = this.isCanEmpty
      let chartOption = getPieOption(data)
      this.chart.setOption(chartOption)
    },
    resizeChart () {
      this.chart.resize()
    }
  },
  mounted () {
    // this.initChart()
  },
  watch: {
    pieData () {
      this.initChart()
    },
    value () {
      let minLength
      let percent
      if (this.isUseComputedLine) {
        minLength = this.$refs.chart.offsetHeight > this.$refs.chart.offsetWidth ? this.$refs.chart.offsetWidth : this.$refs.chart.offsetHeight
        percent = Number(this.seriesRadius[this.seriesRadius.length - 1][1].replace('%', '')) / 100
        minLength = parseInt(minLength / 8 * percent) + 10
        this.changeLabelLine = {
          normal: {
            length: minLength,
            length2: 10
          }
        }
      }
      this.initChart()
    },
    pieType () {
      this.initChart()
    }
  }
}
</script>

<style lang="scss" scoped="scoped">
  .pie{
    width: 100%;
    height: 100%;
    .chart{
      width: 100%;
      height: 100%;
    }
  }
</style>
